<template>
    <div class="v-player">
        <video :controls="that.props.canPlay ? true : false" :loop="that.props.loop" :src="that.props.src" />
        <div class="cannot-play" v-if="!that.props.canPlay">该视频无法播放</div>
    </div>
</template>

<script lang="ts">
import { IPropsExt } from '../../type';
import { defineComponent, SetupContext, getCurrentInstance, ComponentInternalInstance } from 'vue';

class Init {
    props: IProps;
    context: SetupContext;
    current: ComponentInternalInstance;

    constructor(props: IProps, context: SetupContext, current: ComponentInternalInstance) {
        this.props = props;
        this.context = context;
        this.current = current;
    }
}

interface IProps extends IPropsExt {
    src: string;
    loop: boolean;
    canPlay: boolean;
}

export default defineComponent({
    name: 'v-player',

    props: {
        loop: { type: Boolean, default: false },
        canPlay: { type: Boolean, default: true },
        src: { type: String, default: '', required: true },
    },

    setup(props: IProps, context: SetupContext) {
        const current = getCurrentInstance() as ComponentInternalInstance;
        const that = new Init(props, context, current);
        return { that };
    },
});
</script>
